<template>
    <div class="count-container">
        <!-- -1按钮 -->
        <button type="button" class="btn btn-light btn-sm" @click="reduce">-</button>
        <!-- 输入框 -->
        <input type="txt" class="form-control form-control-sm ipt-num" v-model.lazy.number="numB">
        <!-- +1按钮 -->
        <button type="button" class="btn btn-light btn-sm" @click="add">+</button>
    </div>
</template>

<script>
export default {
    name: "EsCount",
    emits: ["numchange"],
    //只读数据 
    props: {
        // 初始值数据只读不支持修改
        num: {
            type: Number,
            default: 0
        },
        // 最小值
        min: {
            type: Number,
            default: NaN
        }
    },
    // date数据支持可读可写
    data() {
        return {
            numB: this.num
        }
    },
    methods: {
        // number值-1
        reduce() {
            // 设置最小值的条件
            if (!isNaN(this.min) && this.min < this.numB)
                this.numB--
        },
        // number值+1
        add() {
            this.numB++
        }
    },
    watch: {
        numB(newVal) {
            const parseResult = parseInt(newVal)
            // 判断是否为整数
            if (isNaN(parseResult) || parseResult < 1) {
                this.numB = 1
                return
            }
            // 判读是否为小数
            if (String(newVal).indexOf(".") !== -1) {
                this.numB = parseResult
                return
            }
            this.$emit("numchange", this.numB)
            // console.log(this.numB);
        }
    }
}
</script>

<style lang="less" scoped>
.count-container {
    display: flex;

    .btn {
        width: 25px;
    }

    .ipt-num {
        width: 34px;
        text-align: center;
        margin: 0 4px;
    }
}
</style>